<template>
    <div class="container">
        <div class="option">
            <el-icon @click="openDialog">
                <CirclePlusFilled />
            </el-icon>
            <el-icon @click="checkStatus">
                <CircleCheckFilled />
            </el-icon>
            <el-icon @click="deleteRow">
                <DeleteFilled />
            </el-icon>
            <el-icon @click="prev">
                <ArrowUpBold />
            </el-icon>
            <el-icon @click="next">
                <ArrowDownBold />
            </el-icon>
        </div>
        <el-carousel ref="carouselRef" direction="vertical" :autoplay="false" v-model="activeIndex"
            @change="(current) => { activeIndex = current; }">
            <el-carousel-item v-for="item in todoList" :key="item"
                :style="item.status == '0' ? todostyle : successstyle">
                <el-row :gutter="20">
                    <el-col :span="24" style="text-align: center;">
                        {{ item.title }}
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24" style="padding: 10px 20px;">
                        {{ item.content }}
                    </el-col>
                </el-row>
            </el-carousel-item>
        </el-carousel>
        <el-drawer v-model="isShow" direction="btt" :with-header="false">
            <template #default>
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="Title">
                        <el-input v-model="form.title" />
                    </el-form-item>
                    <el-form-item label="Content">
                        <el-input v-model="form.content" type="textarea" />
                    </el-form-item>
                </el-form>
                <div style="width: 100%; text-align: right">
                    <el-button size="small" type="primary" @click="confirmClick">confirm</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { CirclePlusFilled, DeleteFilled, CircleCheckFilled, ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
const router = useRouter()
const carouselRef = ref(null)
const prev = () => {
    carouselRef.value.prev()
}
const next = () => {
    carouselRef.value.next()
}
const goPage = (index) => {
    carouselRef.value.setActiveItem(index)
}

const activeIndex = ref(0)
const isShow = ref(false)
const form = ref({
    title: '',
    content: '',
})
const todostyle = {
    backgroundColor: '#E6A23C'
}
const successstyle = {
    backgroundColor: '#67C23A'
}

const todoList = ref([
    {
        title: 'title1',
        content: 'content1',
        status: "1",
        time: '2023-01-01'
    },
    {
        title: 'title32',
        content: 'content2',
        status: "1",

    },
    {
        title: 'title3',
        content: 'content3',
        status: '0',
    },
])
onMounted(() => {
    window.electron.ipcRenderer.send('getTodo', JSON.stringify({}));
    window.electron.ipcRenderer.on('todo', handleTodoResponse);
});
const handleTodoResponse = (event, arg) => {
    if (arg === '无') {
        todoList.value = []
    } else {
        try {
            todoList.value = JSON.parse(arg);
            // 遍历todolist,找到第一个status为0的元素，goPage跳转
            nextTick(() => {
                const foundItem = todoList.value.find(item => item.status === '0');
                if (foundItem) {
                    const index = todoList.value.indexOf(foundItem);
                    goPage(index);
                }
            })


        } catch (error) {
            console.error('Error parsing todo:', error);
            router.push('/error'); // 假设有一个错误处理页面
        }
    }
}
const deleteRow = () => {
    todoList.value.splice(activeIndex.value, 1)
    window.electron.ipcRenderer.send('setTodo', JSON.stringify(todoList.value));
}
const checkStatus = () => {
    if (todoList.value[activeIndex.value].status == '1') {
        todoList.value[activeIndex.value].status = '0'
    } else {
        todoList.value[activeIndex.value].status = '1'
    }
    window.electron.ipcRenderer.send('setTodo', JSON.stringify(todoList.value));

}
const openDialog = () => {
    isShow.value = true
}
const confirmClick = () => {
    isShow.value = false
    todoList.value.push({
        title: form.value.title,
        content: form.value.content,
        status: '0',
        time: new Date().toLocaleDateString()
    })
    form.value.title = ''
    form.value.content = ''
    window.electron.ipcRenderer.send('setTodo', JSON.stringify(todoList.value));
}
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: 100vh;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.9;
    -webkit-app-region: no-drag;
    .option {
        font-size: 20px;
        position: absolute;
        bottom: 0;
        left: 5px;
        z-index: 999;
        background: none;

        .el-icon {
            cursor: pointer;
            transition: 0.3s;
            color: #CDD0D6;
            margin-right: 5px;

            &:hover {
                color: #303133;
            }
        }

    }

    :deep(.el-drawer) {
        height: 75% !important;
        color: #333;
    }

    .el-carousel {
        height: 100%;
        width: 100%;
    }

    .el-carousel__item {
        width: 100%;
        height: 288px;
        color: #475669;
        margin: 0;
        padding: 20px 0;
    }
}
</style>